<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 80px;background-color: #fff">
        <el-row :gutter="20" style="width: 1200px;margin: 0 auto">
          <el-col :span="6">
            <router-link to="/">
              <img src="/imgs/icon.png">
            </router-link>
          </el-col>
          <el-col :span="10">
            <el-menu mode="horizontal" active-text-color="orange" style="height: 70px;" @select="hanleSelect">
              <el-menu-item index="1">食谱</el-menu-item>
              <el-menu-item index="2">视频</el-menu-item>
              <el-menu-item index="3">资讯</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="请输入您要搜索的内容" style="margin-top: 25px;">
              <!--在文本输入框中嵌入按钮-->
              <!--#append表示在输入框后追加内容，这里在输入框后追加了一个按钮-->
              <template #append>
                <!-- 注意:此处的按钮带图标，图标必须在下方的script中导入！-->
                <el-button :icon="Search"></el-button>
              </template>
            </el-input>
          </el-col>
          <el-col :span="2">
            <!-- 设置气泡卡片-->
            <el-popover title="欢迎访问烘焙坊" v-if="user==null" popper-style="text-align:center;">
              <!--记得添加template标签 #reference触发Popover显示的HTML元素 -->
              <template #reference>
                  <el-icon size="25" style="margin-top: 30px;" color="#666"><User/></el-icon>
              </template>
              <div style="text-align: center;">
                <el-button type="info" size="small" @click="router.push('/reg')">注册</el-button>
                <el-button type="warning" size="small" @click="router.push('/login')">登录</el-button>
              </div>
            </el-popover>
            <el-popover v-else :title="'欢迎'+user.nickname+'回来'" :width="200"  popper-style="text-align:center;">
              <!--记得添加template标签 #reference触发Popover显示的HTML元素 -->
              <template #reference>
                <el-icon size="25" style="margin-top: 30px;" color="#666"><User/></el-icon>
              </template>
              <el-avatar :src="'http://localhost:8080'+user.imgUrl"></el-avatar>
              <div style="text-align: center;">
                <el-button type="success" size="small" @click="router.push('/personal')">个人中心</el-button>
                <el-button type="danger" size="small" @click="logout">退出登录</el-button>
              </div>
            </el-popover>
          </el-col>
        </el-row>
      </el-header>
      <!--首页中部是可变区域-->
      <el-main>
        <router-view/>
      </el-main>
      <el-footer
       style="background-color: rgb(50,50,50);color: #666;height:300px;padding: 50px;text-align: center ">
        <div style="width: 1200px;margin: 0 auto">
          <el-row :gutter="10">
            <el-col :span="8">
              <img src="/imgs/icon.png">
              <p>教程灵感就看烘焙坊</p>
              <p>烘焙行业网络社区平台</p>
              <p>全国成百上千个职位等你来</p>
            </el-col>
            <el-col :span="8" id="footrt-center">
              <el-row :gutter="10">
                <el-col :span="8">
                  <h3>关于我们</h3>
                  <p>烘焙学院</p>
                  <p>烘焙食谱</p>
                  <p>分类信息</p>
                  <p>求职招聘</p>
                  <p>社区交流</p>
                </el-col>
                <el-col :span="8">
                  <h3>服务与支持</h3>
                  <p>联系我们</p>
                  <p>广告投放</p>
                  <p>用户协议</p>
                  <p>友情链接</p>
                  <p>在线反馈</p>
                </el-col>
                <el-col :span="8">
                  <h3>底部导航</h3>
                  <p>Archiver</p>
                  <p>手机版</p>
                  <p>小黑屋</p>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="8">
              <p style="font-size: 60px;color: #666;margin: 10px 0">
                <span style="color: orange">烘培</span>坊
              </p>
              <p>烘培行业社区平台</p>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>


<script setup>
import {Search} from '@element-plus/icons-vue';
import router from '@/router';
import {ref} from "vue";
//1.获取保存的用户信息
const user =ref(localStorage.user?JSON.parse(localStorage.user):null)
console.log(user);
//2.实现退出功能
const logout=()=>{
  if(confirm("您确认退出登录吗?")){
    localStorage.clear();
    user.value=null;//也让页面跟着变
    //跳到首页
    router.push('/');
  }
}

//给顶部栏的导航项被选择时添加跳转功能 跳转到列表页面
const hanleSelect = (key,keyPath)=>{
  router.push('/list');
}
</script>
<style>
/*此处设置的是页脚中间部分文字标题颜色为白色 文字内容有外间距*/
footer h3 {
  color: #fff;
}
#footer-center p {
  margin: 5px 0;
}
</style>